<script lang="tsx" setup>
import { reactive, ref, onMounted, watch, computed } from 'vue'
// 引入接口
import { getDetailAPI, getListAPI } from '@/api/vulnerability/fore'
// 时间处理
import { formatDate } from '@/utils'
import { HttpCodeEnum } from '@packages/share/enums'
const emit = defineEmits(['handClick'])
// 绑定接收：时间
const props = defineProps({
  time: {
    type: Object,
    required: true,
    default: () => { }
  }
})
// 漏洞列表存储
const rankList: any = reactive(
  {
    title: '漏洞列表',
    list: []
  }
)
// 左侧详细信息
const infoList = reactive({
  info: [
    {
      name: '漏洞类型',
      value: ''
    },
    {
      name: '危险级别',
      value: ''
    },
    {
      name: '发布时间',
      value: ''
    },
    {
      name: 'CNVD编号',
      value: ''
    },
    {
      name: 'CNNVD编号',
      value: ''
    },
    {
      name: 'CVE编号',
      value: ''
    }
  ],
  desc: '',
  link: ''
})
// 映射表
const infoMapping = {
  vulType: 0,
  riskLevel: 1,
  releaseTime: 2,
  cnvd: 3,
  cnnvd: 4,
  cve: 5
}
const updateInfoList = (data: any) => {
  const { vulDescriptionCn: desc, vulAdvisory: link } = data
  // 使用映射对象更新infoList.info的值
  for (const [key, index] of Object.entries(infoMapping)) {
    if (data[key] !== undefined) {
      infoList.info[index].value = data[key]
    }
  }
  infoList.desc = desc
  infoList.link = link
  // 查看infoList的当前状态
  // console.log(infoList);
}

//测试用页码
const page = reactive({
  pageNum: 1,
  pageSize: 10,
  total: 0
})
// 参数合并
const _parameter = () => {
  const { pageNum, pageSize } = page
  return { ...props.time, pageNum, pageSize }
}
// 漏洞列表初始化
const init = () => {
  // 漏洞列表获取请求
  getListAPI(_parameter()).then((res) => {
    const { data, code } = res.data
    if (code === HttpCodeEnum.SUCCESS) {
      rankList.list = data.data
      page.total = data.total
      // 默认选择第一个
      emit('handClick', rankList.list[0])
      // 初始有值则加载左侧列表
      rankList.list[0] && getinto(rankList.list[0].cve)
    }
  })
}

/**   */
const loading = ref(false);
// 加载更多数据
const loadMore = () => {
  console.log(111);
  
  if (rankList.list.length >= page.total) { return };
  loading.value = true
  page.pageNum = page.pageNum + 1
  getListAPI(_parameter()).then((res) => {
    const { data, code } = res.data
    if (code === HttpCodeEnum.SUCCESS) {
      rankList.list.push(...data.data)
    }
    loading.value = false
  })
};

// 是否禁用无限滚动
const isDisabled = computed(() => rankList.list.length >= page.total && page.total!=0);
// 是否没有更多数据
const noMore = computed(() => rankList.list.length >= page.total && page.total!=0);

/**   */

// 列表点击
const handClick = (subItem: any) => {
  emit('handClick', subItem)
  getinto(subItem.cve)
}

// 获取详情信息
const getinto = (cve: string) => {
  getDetailAPI(cve).then((res) => {
    const { code, data } = res.data
    if (code === HttpCodeEnum.SUCCESS) {
      updateInfoList(data)
    }
  })
}
// 挂载初始化漏洞列表
onMounted(() => {
  // 右侧漏洞列表
  init()
})
// 监听时间变化
watch(props.time, () => {
  init()
})
</script>
<template>
  <div class="flex">
    <!-- 点击显示于左侧内容 -->
    <div class="flex-left">
      <div class="info-title">漏洞信息</div>
      <div class="info-container bgc-color-info">
        <div class="grid-container">
          <div class="item" v-for="(item, index) in infoList.info" :key="index">
            <span class="text-color-info">{{ item.name }}： </span>
            <span>{{ item.value }} </span>
          </div>
        </div>
      </div>
      <div class="info-title">漏洞描述</div>
      <div class="info-container bgc-color-info">
        {{ infoList.desc }}
      </div>
      <!-- <jm-input :value="infoList.desc" :rows="5" type="textarea" readonly class="info-container bgc-color-info"/> -->
      <div class="info-title">安全建议&解决方案</div>
      <div class="info-container bgc-color-info">
        {{ infoList.link }}
      </div>
    </div>

    <!-- 右侧漏洞列表 -->
    <div class="flex-right">
      <!-- 排名 -->
      <div class="rank-con">
        <div class="rank-box">
          <div class="title">{{ rankList.title }}</div>

          <div v-infinite-scroll="loadMore" :infinite-scroll-disabled="isDisabled" class="scrollbox">
            <jm-timeline class="timeline">
              <jm-timeline-item v-for="(item, index) in rankList.list" :key="index" :timestamp="item.vulName"
                hide-timestamp>
                <div class="timeline-con" @click="handClick(item)">
                  <span>{{ formatDate(item.createTime) }}</span>
                  <span>{{ item.vulName }}</span>
                </div>
              </jm-timeline-item>
            </jm-timeline>
            <p v-if="loading" class="loading-text">加载中...</p>
            <p v-if="noMore" class="no-more-text">没有更多数据了</p>
          </div>

        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
%flex-center {
  display: flex;
  justify-content: center;
}

%flex-between {
  display: flex;
  justify-content: space-between;
}
.flex{
  display: flex;
  @extend %flex-between;
}
.flex-left {
  flex: 1 1 0;
  padding-left: 1.25rem;

  .info-title {
    font-weight: 700;
    font-size: 1.125rem;
    color: var(--jm-color-primary);
    text-align: left;
    margin-bottom: 0.9375rem;
  }

  .info-container {
    width: 100%;
    height: auto;
    padding: 20px;
    text-align: left;
    margin-bottom: 1.25rem;
  }
}
.flex-right {
  width: 30rem;
  position: relative;
  .rank-con {
    @extend %flex-between;
    width: 80%;
    margin: 0 auto;

    .rank-box {
      width: 100%;

      .title {
        text-align: left;
        position: relative;
        padding-left: 0.75rem;
        margin-bottom: 1.25rem;
        font-weight: 700;
        font-size: 1.125rem;
        color: var(--jm-color-primary);

      }
      .scrollbox{
        overflow: auto;
        position: absolute;
        flex: 1;
        height: calc(100% - 3.5rem);;
        &::-webkit-scrollbar-track-piece {
          background-color: var(--el-fill-color-blank);
        }

        &::-webkit-scrollbar {
          width: .375rem;
          height: .375rem;
        }

        &::-webkit-scrollbar-thumb {
          border-radius: 1.25rem;
          background-color: var(--el-text-color-disabled);

          &:hover {
            background-color: #888;
          }
        }
      }
      .timeline {
        :hover {
          color: #ffa502;
          cursor: pointer;
        }

        .timeline-con {
          @extend %flex-between;
          span:nth-child(1) {
           padding-right: 2.75rem;
          }
          span:nth-child(2) {
            text-align: left;
            width: 250px;
            /* 设置容器的宽度 */
            white-space: nowrap;
            /* 禁止文本换行 */
            overflow: hidden;
            /* 隐藏超出容器的部分 */
            text-overflow: ellipsis;
            /* 用省略号表示被截断的文本 */
          }

        }
      }

    }
  }
}



.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* 创建三列，每列等宽 */
  grid-gap: 0.625rem;
  /* 网格线之间的间隙 */
  width: 100%;

  .item {
    text-align: left;
  }
}



.loading-text,
.no-more-text {
  text-align: center;
  color: #999;
  padding: 10px 0;
}
</style>
